<template>
  <div class="productList">
    <el-button type="primary" @click="dialogVisibleLondy = true" class="add" >+ 添加产品</el-button>
    <el-table border
      :data="productList"
      style="width: 100%"
      v-loading="loading">
      <el-table-column
        prop="create_time"
        label="产品添加日期"
        min-width="200">
        <template slot-scope="scope">
          <p v-html="scope.row.create_time"></p>
        </template>
      </el-table-column>
      <el-table-column
        prop="title"
        label="产品名"
        min-width="180">
      </el-table-column>
      <el-table-column
        label="封面图"
        prop="list_img"
        min-width="360">
        <template slot-scope="scope">
          <img :src=" BASE_API + scope.row.list_img" />
          <!-- <img src="scope.row.article_img"> -->
        </template>
      </el-table-column>
      <el-table-column
      label="操作"
      min-width="100">
        <template slot-scope="scope">
          <el-button type="text" @click="openProInfo(scope.$index)">查看</el-button>
          <el-button type="text" @click="delProduct(scope.$index)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 查看/编辑产品 -->
    <el-dialog title="查看/编辑" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="产品名" :label-width="formLabelWidth">
          <el-input  v-model="form.title2" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="分类" :label-width="formLabelWidth">
          <el-radio-group v-model="form.cate2">
            <el-radio label="crusher">破碎</el-radio>
            <el-radio label="mill">磨粉</el-radio>
            <el-radio label="sand">制砂</el-radio>
            <el-radio label="mobile">移动站</el-radio>
            <el-radio label="peitao">配套设备</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="进料口" :label-width="formLabelWidth">
          <el-input  v-model="form.insize2" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="出料口" :label-width="formLabelWidth">
          <el-input  v-model="form.outsize2" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="应用范围" :label-width="formLabelWidth">
          <el-input  v-model="form.area2" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="产量" :label-width="formLabelWidth">
          <el-input  v-model="form.capacity2" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="物料" :label-width="formLabelWidth">
          <el-input  v-model="form.material2" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="节能" :label-width="formLabelWidth">
          <el-input  rows="3" v-model="form.overview2" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="节能内容" :label-width="formLabelWidth">
          <el-input type="textarea" v-model="form.detail2" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="独特设计" :label-width="formLabelWidth">
          <el-input  rows="3" v-model="form.special2" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="独特设计内容" :label-width="formLabelWidth">
          <el-input type="textarea" v-model="form.design2" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="工艺升级" :label-width="formLabelWidth">
          <el-input  rows="3" v-model="form.technology2" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="工艺升级内容" :label-width="formLabelWidth">
          <el-input type="textarea" v-model="form.upgrades2" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="运行快速" :label-width="formLabelWidth">
          <el-input    rows="3" v-model="form.operation2" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="运行快速内容" :label-width="formLabelWidth">
          <el-input type="textarea" v-model="form.fast2 " auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="概述" :label-width="formLabelWidth">
          <el-input type="textarea" v-model="form.introduce2" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="工作原理" :label-width="formLabelWidth">
          <el-input  type="textarea" rows="4" v-model="form.principle2" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="封面图片" :label-width="formLabelWidth">
          <el-upload
            class="fl"
            :action="token1"
            list-type="picture-card"
            :on-success="listAdd2"
            name="img"
            :limit="1"
            :on-exceed="handleExceed"
            :on-remove="listRemove2"
            :file-list="imgList3">
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </el-form-item>
        <el-form-item label="banner图片" :label-width="formLabelWidth">
          <el-upload
            :action="token1"
            class="fl"
            list-type="picture-card"
            :on-exceed="handleExceed"
            :on-remove="bannerRemove2"
            :on-success="bannerAdd2"
            name="img"
            :limit="1"
            :file-list="imgList2"
            >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </el-form-item>
        <el-form-item label="概述图片" :label-width="formLabelWidth">
          <el-upload
            :action="token1"
            class="fl"
            list-type="picture-card"
            :on-exceed="handleExceed"
            :on-remove="articleRemove2"
            :on-success="articleAdd2"
            name="img"
            :limit="1"
            :file-list="imgList4"
            >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="uploadProduct()">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 添加产品 -->
    <el-dialog title="添加产品" :visible.sync="dialogVisibleLondy">
      <el-form :model="form">
        <el-form-item label="产品名" :label-width="formLabelWidth">
          <el-input  v-model="form.title" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="分类" :label-width="formLabelWidth">
          <el-radio-group v-model="form.cate">
            <el-radio label="crusher">破碎</el-radio>
            <el-radio label="mill"   >磨粉</el-radio>
            <el-radio label="sand"   >制砂</el-radio>
            <el-radio label="mobile" >移动站</el-radio>
            <el-radio label="peitao">配套设备</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="进料口" :label-width="formLabelWidth">
          <el-input  v-model="form.insize" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="出料口" :label-width="formLabelWidth">
          <el-input  v-model="form.outsize" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="应用范围" :label-width="formLabelWidth">
          <el-input  v-model="form.area" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="产量" :label-width="formLabelWidth">
          <el-input  v-model="form.capacity" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="物料" :label-width="formLabelWidth">
          <el-input  v-model="form.material" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="节能" :label-width="formLabelWidth">
          <el-input rows="3" v-model="form.overview" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="节能内容" :label-width="formLabelWidth">
          <el-input type="textarea"  v-model="form.detail" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="独特设计" :label-width="formLabelWidth">
          <el-input rows="3" v-model="form.special" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="独特设计内容" :label-width="formLabelWidth">
          <el-input type="textarea"  v-model="form.design" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="工艺升级" :label-width="formLabelWidth">
          <el-input  rows="3" v-model="form.technology" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="工艺升级内容" :label-width="formLabelWidth">
          <el-input type="textarea" v-model="form.upgrades" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="运行快速" :label-width="formLabelWidth">
          <el-input    rows="3" v-model="form.operation" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="运行快速内容" :label-width="formLabelWidth">
          <el-input type="textarea" v-model="form.fast" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="概述" :label-width="formLabelWidth">
          <el-input  type="textarea" rows="4" v-model="form.introduce" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="工作原理" :label-width="formLabelWidth">
          <el-input  type="textarea" rows="4" v-model="form.principle" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="封面图片" :label-width="formLabelWidth">
          <el-upload
            ref="upload2"
            class="fl"
            :action="token1"
            list-type="picture-card"
            :on-success="listAdd"
            name="img"
            :limit="1"
            :on-exceed="handleExceed"
            :on-remove="listRemove"
            >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </el-form-item>
        <el-form-item label="banner图片" :label-width="formLabelWidth">
          <el-upload
            ref="upload2"
            :action="token1"
            class="fl"
            list-type="picture-card"
            :on-exceed="handleExceed"
            :on-remove="bannerRemove"
            :on-success="bannerAdd"
            name="img"
            :limit="1"
            >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </el-form-item>
        <el-form-item label="概述图片" :label-width="formLabelWidth">
          <el-upload
            ref="upload2"
            :action="token1"
            class="fl"
            list-type="picture-card"
            :on-exceed="handleExceed"
            :on-remove="articleRemove"
            :on-success="articleAdd"
            name="img"
            :limit="1"
            >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleLondy = false">取 消</el-button>
        <el-button type="primary" @click="addProduct()">确 定</el-button>
      </div>
    </el-dialog>
    <el-pagination
      background
      layout="prev, pager, next"
      :page-size="10"
      :total="productPage"
      @current-change="handleCurrentChange">
    </el-pagination>
  </div>
</template>
<script>
import axios from 'axios'
import qs from 'qs'
import { Message } from 'element-ui'
export default {
  data () {
    return {
      response: '',
      dialogImageUrl: '',
      dialogVisible: false,
      dialogFormVisible: false,
      productPage: 1,
      pageSize: '',
      changePage: 1,
      dialogVisibleLondy: false,
      londy: [],
      loading: false,
      token1: '',
      form: {
        title2: '',
        cate2: '',
        insize2: '',
        outsize2: '',
        capacity2: '',
        area2: '',
        material2: '',
        overview2: '',
        special2: '',
        technology2: '',
        operation2: '',
        detail2: '',
        design2: '',
        upgrades2: '',
        fast2: '',
        introduce2: '',
        principle2: '',
        list_img2: '',
        article_img2: '',
        single_banner2: '',
        title: '',
        cate: '',
        insize: '',
        outsize: '',
        capacity: '',
        area: '',
        material: '',
        overview: '',
        detail: '',
        special: '',
        design: '',
        technology: '',
        upgrades: '',
        operation: '',
        fast: '',
        introduce: '',
        principle: '',
        list_img: '',
        article_img: '',
        single_banner: ''
      },
      imgList2: [],
      imgList3: [],
      imgList4: [],
      currentIndex: '',
      create_time: '',
      formLabelWidth: '200px',
      productList: [],
      BASE_API: process.env.BASE_API
    }
  },
  async mounted () {
    window.t = 0
    this.loading = true
    this.token1 = process.env.BASE_API + '/upload/?token=' + localStorage.getItem('token')
    let res = await axios.get('/product')
    if (res.data.errno === 0) {
      this.productList = res.data.data.data
      for (let i = 0; i < this.productList.length; i++) {
        let j = new Date(this.productList[i].create_time * 1000)
        let y = j.getFullYear()
        let m = j.getMonth() + 1
        let d = j.getDate()
        this.productList[i].create_time = y + '-' + (m < 10 ? '0' + m : m) + '-' + (d < 10 ? '0' + d : d) + '<br>' + j.toTimeString().substr(0, 8)
      }
      this.productPage = Number.parseInt(res.data.data.count)
      this.loading = false
    }
  },
  methods: {
    // 查看产品
    async openProInfo (index) {
      this.currentIndex = index
      let res = await axios.get('/product/' + this.productList[index]._id)
      console.log(res)
      this.dialogFormVisible = true
      this.form.title2 = res.data.data.title
      this.form.cate2 = res.data.data.cate
      this.form.insize2 = res.data.data.insize
      this.form.outsize2 = res.data.data.outsize
      this.form.capacity2 = res.data.data.capacity
      this.form.area2 = res.data.data.area
      this.form.material2 = res.data.data.material
      this.form.overview2 = res.data.data.overview
      this.form.special2 = res.data.data.special
      this.form.technology2 = res.data.data.technology
      this.form.operation2 = res.data.data.operation
      this.form.detail2 = res.data.data.detail
      this.form.design2 = res.data.data.design
      this.form.upgrades2 = res.data.data.upgrades
      this.form.fast2 = res.data.data.fast
      this.form.introduce2 = res.data.data.introduce
      this.form.principle2 = res.data.data.principle
      this.form.list_img2 = res.data.data.list_img
      this.form.single_banner2 = res.data.data.single_banner
      this.form.article_img2 = res.data.data.article_img
      this.imgList2 = []
      if (this.form.single_banner2 !== '') {
        this.imgList2.push({ url: process.env.BASE_API + this.form.single_banner2 })
      }
      this.imgList3 = []
      if (this.form.list_img2 !== '') {
        this.imgList3.push({ url: process.env.BASE_API + this.form.list_img2 })
      }
      this.imgList4 = []
      if (this.form.article_img2 !== '') {
        this.imgList4.push({ url: process.env.BASE_API + this.form.article_img2 })
      }
    },
    // 修改产品
    async uploadProduct () {
      if (Number.isInteger(this.currentIndex)) {
        console.log(this.currentIndex)
      }
      let data = {
        title: this.form.title2,
        cate: this.form.cate2,
        insize: this.form.insize2,
        outsize: this.form.outsize2,
        capacity: this.form.capacity2,
        area: this.form.area2,
        material: this.form.material2,
        overview: this.form.overview2,
        special: this.form.special2,
        technology: this.form.technology2,
        introduce: this.form.introduce2,
        operation: this.form.operation2,
        detail: this.form.detail2,
        design: this.form.design2,
        upgrades: this.form.upgrades2,
        fast: this.form.fast2,
        principle: this.form.principle2
      }
      // console.log(data)
      let res = await axios.put(
        '/product/' + this.productList[this.currentIndex]._id,
        qs.stringify(data)
      )
      this.productList[this.currentIndex].title = this.form.title2
      this.dialogFormVisible = false
      if (res.data.errno === 0) {
        Message.success({ message: '修改成功!' })
      }
    },
    // 增加产品
    async addProduct () {
      let data = {
        title: this.form.title,
        cate: this.form.cate,
        insize: this.form.insize,
        outsize: this.form.outsize,
        capacity: this.form.capacity,
        area: this.form.area,
        material: this.form.material,
        overview: this.form.overview,
        special: this.form.special,
        technology: this.form.technology,
        operation: this.form.operation,
        detail: this.form.detail,
        design: this.form.design,
        upgrades: this.form.upgrades,
        fast: this.form.fast,
        introduce: this.form.introduce,
        principle: this.form.principle,
        single_banner: this.form.single_banner,
        list_img: this.form.list_img,
        article_img: this.form.article_img
      }
      let res = await axios.post('/product/', qs.stringify(data))
      if (res.data.errno === 0) {
        this.productList.unshift({
          title: this.form.title,
          _id: res.data.data
        })
        Message.success({ message: '添加成功!' })
        this.dialogVisibleLondy = false
        this.form.title = ''
        this.form.cate = ''
        this.form.insize = ''
        this.form.outsize = ''
        this.form.capacity = ''
        this.form.area = ''
        this.form.material = ''
        this.form.overview = ''
        this.form.special = ''
        this.form.technology = ''
        this.form.operation = ''
        this.form.detail = ''
        this.form.design = ''
        this.form.upgrades = ''
        this.form.fast = ''
        this.form.introduce = ''
        this.form.principle = ''
        this.form.single_banner = ''
        this.form.article_img = ''
        this.form.list_img = ''
        // this.$refs.upload.clearFiles()
        // this.$refs.upload1.clearFiles()
        // this.$refs.upload2.clearFiles()
      }
    },
    // 删除产品
    async delProduct (index) {
      await this.$confirm('确认删除?', '提示', { type: 'warning' })
      let res = await axios.delete(
        '/product/' + this.productList[index]._id
      )
      if (res.data.errno === 0) {
        Message.success({ message: '删除成功' })
        this.productList.splice(index, 1)
      }
    },
    /** ************************************添加产品-删除操作**********************************/
    // 封面图 删除图片
    async listRemove (file, fileList) {
      let imgpath = file.response.data
      let res = await axios.delete(
        '/upload/?' + qs.stringify({ img: imgpath })
      )
      if (res.data.errno === 0) {
        Message.success({ message: '删除成功' })
        this.form.list_img = ''
      } else {
        console.log(res.data)
      }
    },
    // banner 删除图片
    async bannerRemove (file, fileList) {
      let imgpath = file.response.data
      let res = await axios.delete(
        '/upload/?' + qs.stringify({ img: imgpath })
      )
      if (res.data.errno === 0) {
        Message.success({ message: '删除成功' })
        this.form.single_banner = ''
      } else {
        console.log(res.data)
      }
    },
    // 概述 删除图片
    async articleRemove (file, fileList) {
      let imgpath = file.response.data
      let res = await axios.delete(
        '/upload/?' + qs.stringify({ img: imgpath })
      )
      if (res.data.errno === 0) {
        Message.success({ message: '删除成功' })
        this.form.article_img = ''
      } else {
        console.log(res.data)
      }
    },
    /** *********************************修改产品-删除操作 *********************************/
    // (修改产品)封面图 删除图片
    async listRemove2 (file, fileList) {
      console.log(file)
      let imgpath = ''
      if (file.size === undefined) {
        console.log('这是已上传的')
        console.log(imgpath)
        imgpath = file.url.replace('/tmp/', '/')
      } else {
        imgpath = file.response.data.replace('/tmp/', '/')
        console.log(imgpath)
      }
      let res = await axios.delete(
        '/upload/?' + qs.stringify({ img: imgpath })
      )
      if (res.data.errno === 0) {
        Message.success({ message: '删除成功' })
        this.form.list_img2 = ''
        await axios.put(
          '/product/' + this.productList[this.currentIndex]._id,
          qs.stringify({ list_img: this.form.list_img2 })
        )
      } else {
        console.log(res.data)
      }
    },
    // (修改产品)banner 删除图片
    async bannerRemove2 (file, fileList) {
      let imgpath = ''
      if (file.size === undefined) {
        imgpath = file.url.replace('/tmp/', '/')
      } else {
        imgpath = file.response.data.replace('/tmp/', '/')
      }
      let res = await axios.delete(
        '/upload/?' + qs.stringify({ img: imgpath })
      )
      if (res.data.errno === 0) {
        Message.success({ message: '删除成功' })
        this.form.single_banner2 = ''
        await axios.put(
          '/product/' + this.productList[this.currentIndex]._id,
          qs.stringify({ single_banner: this.form.single_banner2 })
        )
      } else {
        console.log(res.data)
      }
    },
    // (修改产品) 删除概述图片
    async articleRemove2 (file, fileList) {
      console.log(file)
      let imgpath = ''
      if (file.size === undefined) {
        console.log('这是已上传的')
        console.log(imgpath)
        imgpath = file.url.replace('/tmp/', '/')
      } else {
        imgpath = file.response.data.replace('/tmp/', '/')
        console.log(imgpath)
      }
      let res = await axios.delete(
        '/upload/?' + qs.stringify({ img: imgpath })
      )
      if (res.data.errno === 0) {
        Message.success({ message: '删除成功' })
        this.form.article_img2 = ''
        await axios.put(
          '/product/' + this.productList[this.currentIndex]._id,
          qs.stringify({ article_img: this.form.article_img2 })
        )
      } else {
        console.log(res.data)
      }
    },
    // 翻页
    async handleCurrentChange (val) {
      this.loading = true
      let res = await axios.get('/product?page=' + val)
      this.productList = res.data.data.data
      this.loading = false
    },
    /** *********************************添加产品-添加操作 *********************************/
    // (添加产品) 封面图 添加图片
    listAdd (response) {
      this.form.list_img = response.data
    },
    // 添加多张时警告
    handleExceed (files, fileList) {
      this.$message.warning('封面图片只允许上传最多1张图片')
    },
    // (添加产品) banner 添加图片
    bannerAdd (response) {
      this.form.single_banner = response.data
    },
    // (添加产品) 概述 添加图片
    articleAdd (response) {
      this.form.article_img = response.data
    },
    /** *********************************修改产品-添加操作 *********************************/
    // (修改产品) 封面图 添加图片
    async listAdd2 (response) {
      this.form.list_img2 = response.data
      await axios.put(
        '/product/' + this.productList[this.currentIndex]._id,
        qs.stringify({ list_img: this.form.list_img2 })
      )
    },
    // (修改产品) banner 添加图片
    async bannerAdd2 (response) {
      this.form.single_banner2 = response.data
      await axios.put(
        '/product/' + this.productList[this.currentIndex]._id,
        qs.stringify({ single_banner: this.form.single_banner2 })
      )
    },
    // （修改产品）概述 添加图片
    async articleAdd2 (response) {
      this.form.article_img2 = response.data
      await axios.put(
        '/product/' + this.productList[this.currentIndex]._id,
        qs.stringify({ article_img: this.form.article_img2 })
      )
    },
    // 拼接获取封面图
    async getCoverImage (scope) {
      return process.env.BASE_API + scope.row.list_img
    }
  }
}
</script>
<style lang="sass">
.productList .el-table th
  text-align: center
.productList .fl
  text-align: left
.cell
  text-align: center
.el-button--primary
  margin-bottom: 22px !important
  background: #409EFF
.el-pagination
  margin-top: 40px
  margin-bottom: 60px
.caseName
  margin-top: 0
  padding-left: 0
  li
    width: 148px
    float: left
    margin-right: 8px
    list-style: none
.el-dialog
  width: 70%
</style>

<style lang="sass" scoped>
body
  margin: 0
.add
  float: left
.find
  width: 20%
  float: left
  margin-right: 15px
</style>
